<link rel="stylesheet" type="text/css" href="<?php echo CSS_URL; ?>/jquery-ui.css" />
<script type="text/javascript" src="<?php echo JS_URL; ?>/jquery-1.10.2.js"></script>
<script type="text/javascript" src="<?php echo JS_URL; ?>/jquery-ui.js"></script>
<script>

var data_array = new Array();
for(var i=0;i<500;i++){
	data_array[i] = 0;
}

$(function() {
<?php 
    for($i=1;$i<=10;$i++){
?>
    $("#slider-vertical<?php echo $i;?>" ).slider({
        orientation: "vertical",
        range: "min",
        min: 0,
        max: 255,
        value: 0,
        slide: function(event,ui){
            $("#amount<?php echo $i;?>").val(ui.value);
        }
    });
    $("#amount<?php echo $i;?>").val($("#slider-vertical<?php echo $i;?>").slider("value"));
<?php 
    }
?>
});
</script>
<script>
function change_value(id){
	//alert($("#amount"+id).val());
	var value = $("#amount"+id).val();
	if(value=='')
		return true;
	if(!isNaN(value) && parseInt(value)>=0 && parseInt(value)<=255){
		$("#slider-vertical"+id).slider("value",value);
	}else{
	    alert("请输入0-255之间的数字");
	    $("#amount"+id).val(0);
	    $("#slider-vertical"+id).slider("value",0);
	    $("#amount"+id).focus();
	}
}
function check_value(id){
	var value = $("#amount"+id).val();
	if(value==''){
	    $("#amount"+id).val(0);
	    $("#slider-vertical"+id).slider("value",0);
	    $("#amount"+id).focus();
	}else{
		$("#amount"+id).val(parseInt(value));
	}
}
function select_page(){
	$('select[class="select_page"]').each(function () {
		$(this).empty();
	});
	$('input[type="checkbox"][class="check_list"]:checked').each(function () {
		var value = $(this).val();
		var index_value = (value-1)*10;
		//$('#select_num1').append("<option value='"+(index_value+1)+"'>"+(index_value+1)+"</option>");
		$('select[class="select_page"]').each(function (i) {
			$(this).append("<option value='"+(index_value+1+i)+"'>"+(index_value+1+i)+"</option>");
		});
	});
}

function select_all(){
	if($("#select_all").is(':checked')){
		$('.check_list').prop("checked",true); 
		select_page();
	}else{
		$('.check_list').prop("checked",''); 
		select_page();
	}
}
function refresh_comport(){
	$.ajax({
		type: "post",
        url: "index.php?r=light/getport",
        dataType: "json",
        async:false,
        success: function(result){
            if(result.status==1){
                $('#select_port').empty();
                for(var key in result.info){
                	 $('#select_port').append("<option value='"+key+"'>"+result.info[key]+"</option>");
                }
                alert(result.msg);    
            }else{
                alert(result.msg);  
            }
        },
    	error: function(){
			alert("error");
        }
    });  
}

function send_data(){
	$('input[type="checkbox"][class="check_list"]:checked').each(function(){
		var value = $(this).val();
		var index_flag = (value-1)*10;
		for(var i=1;i<=10;i++){
			var index = index_flag+i;
			data_array[index] = $('#amount'+i).val();
		}
	});
	var com_num = $("#select_port").val();
	//alert(com_num);
	//alert(data_array.join(','));
	$.ajax({
		type: "post",
        url: "index.php?r=light/setdata",
        dataType: "json",
        data: "port_num="+com_num+"&data="+data_array.join(','),
        async:false,
        success: function(result){
            alert(result.msg);  
        },
    	error: function(){
			alert("error");
        }
    });  
}
</script>

<?php
$this->pageTitle=Yii::app()->name . ' - Light Control';
$this->breadcrumbs=array(
	'灯光控制',
);
?>
<h1>灯光控制</h1>

<div style="float:left;min-height:485px;width:200px;" class="portlet-content">
    <div class="portlet-decoration">
        <div class="portlet-title">串口选择</div>
    </div>
    <div style="margin-top: 5px;margin-left:5px;">
        <ul class="operations">
          <li>串口编号：
              <label>
              <select name="select_port" id="select_port">
                <option value="1">COM1</option>
                <option value="2">COM2</option>
                <option value="3">COM3</option>
                <option value="4">COM4</option>
                <option value="5">COM5</option>
                <option value="6">COM6</option>
              </select>
              </label>
          </li>
           <li> 波 特 率 ：250000
           </li>
           <li>
               <input type="button" onclick="refresh_comport()" value="刷新串口">
               <input type="button" onclick="send_data()" value="发送数据">
           </li>
       </ul>
    </div>
    
    <br clear="all">
    <div class="portlet-decoration">
        <div class="portlet-title">
           <div style="margin-top:-2px;float: left;">
              <input type="checkbox" name="select_all" id="select_all" onclick="select_all()">                                                 
           </div>  
           <span >                
                            选择灯光
           </span>               
        </div>
    </div>
    <div id="check_group" style="margin-top:5px;">
    <?php 
    for($i=1;$i<=50;$i++){
    ?>
        <div style="float: left;width:64px;" >
            <input class="check_list" type="checkbox" <?php if($i==1) echo 'checked="checked"';?> onclick="select_page()"
        name="page_<?php echo $i;?>" value="<?php echo $i;?>" />第<?php echo $i;?>页
        </div>
    <?php 
    }
    ?>
    </div>
    
</div>	

<div style="float:left;margin-left:10px;min-height:485px;" class="portlet-content">
<div class="portlet-decoration">
    <div class="portlet-title">强度设置</div>
</div>
<br clear="all">
<div class="portlet-content">
<?php 
for($i=1;$i<=10;$i++){
?>
<div style="float:left;width:65px;">
    <select class="select_page" id="select_num<?php echo $i;?>" name="select_num<?php echo $i;?>"  size="3" multiple="multiple"> 
        <option value="<?php echo $i;?>"><?php echo $i;?></option>
    </select>
    <div id="slider-vertical<?php echo $i;?>" style="height:320px;margin-top: 10px;margin-left:12px;"></div>
    <div style="margin-top: 10px;">
        <input type="text" id="amount<?php echo $i;?>" oninput="change_value(<?php echo $i;?>)" 
        onblur="check_value(<?php echo $i;?>)" style="width:30px;border:1;color:#f6931f; font-weight:bold;" />
    </div>
</div>
<?php 
}
?>
</div>
</div>

